<template>
  <footer class="index-wrapper">
    <div class="nav hairlines-top">
      <router-link :to="data.to" v-for="(data, index) in datas" :key="data.id" :class="index === activeIndex ? 'active' : ''" v-if="data.have">
        <div>
          <i class="iconfont" :class="index === activeIndex ? data.active : data.icon"></i>
        </div>
        <p>{{data.title}}</p>
      </router-link>
    </div>
  </footer>
</template>
<script>
export default {
  name: 'Nav',
  props: {
    activeIndex: Number
  },
  data () {
    return {
      datas: [
        {id: 1, icon: 'icon-index', active: 'icon-index-active', title: '首页', to: '/index', have: true},
        {id: 2, icon: 'icon-server', active: 'icon-server-active', title: '服务', to: '/service', have: true},
        {id: 3, icon: 'icon-personal', active: 'icon-personal-active', title: '我的', to: '/mine', have: true}
      ]
    }
  },
  created () {
    let bind = this.$store.state.bind_seller
    if (bind !== 0) {
      this.datas[0].have = false
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .nav{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: rem(97);
    background: #fff;
    display: flex;
    align-items: center;
    text-align: center;
    .hairlines{
      height: 1px;
    }
    .hairlines:after{
      background: #d1d1d1;
      top: 0;
    }
    a{
      // width: 33.3%;
      flex:1 1 auto;
      font-size: rem(22);
      color: #999;
      .iconfont{
        font-size: rem(38);
      }
    }
    .active{
      color: #72a5ef;
    }
  }
</style>
